<!--
 * @Description: 登录包裹
 * @Author: chaizhou
 * @Date: 2023-02-17 17:12:38
 * @LastEditTime: 2023-02-28 16:36:04
-->

<template>
  <div class="loginWrap">
    <div class="leftPart">
      <img class="leftPartContent" :src="contentImg" />
    </div>
    <div class="rightPart">
      <template v-if="mode === 'login'">
        <Login @mode="modeChange" />
      </template>
      <template v-else>
        <Find @mode="modeChange" />
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Find from './Find'
import Login from './Login'
import contentImg from '../../assets/images/login_content.png'
import store from 'store'
const mode = ref('login')
const modeChange = (e) => {
  mode.value = e
}
onMounted(() => {
  // store.set('session-id', '121')
})
</script>

<style lang="less" scoped>
.loginWrap {
  width: 100%;
  height: 100vh;
  display: flex;
  min-width: 1000px;
  overflow-x: auto;
  overflow-y: hidden;
  .leftPart {
    width: 29%;
    // min-width: ;
    height: 100%;
    background: url('../../assets/images/login_bg.png') no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .leftPartContent {
      margin-left: -30px;
      width: 97%;
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 48px;
      left: 48px;
      width: 45%;
      height: 24px;
      background: url('../../assets/images/login_logo.png') no-repeat;
      background-size: contain;
    }
  }
  .rightPart {
    flex: 1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
